<template >
    <div>
        <!-- 商品分类  -->

        <!-- mian bao xie  -->
        <div class="mbx">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>


        <div class="tab-box">
            <!-- search -->
            <div class="addclassify">
                <el-button type="primary" @click="open">添加分类</el-button>
            </div>
            <!-- 树状表格 -->
            <!-- tree 插件方法 -->
            <!-- 分类表格   所有参数解释
             :data(设置数据源)
             :columns(设置表格中列配置信息)
             :selection-type(是否有复选框)
             :expand-type(是否展开数据)
              show-index(是否设置索引列) 
              index-text(设置索引列头)
              border(是否添加边框) 
             :show-row-hover(是否鼠标悬停高亮)-->
            <tree-table :data="categories" :columns="columns" :selection-type="false" :expand-type="false" show-index
                index-text="#" border :show-row-hover="false">
                <!-- 是否有效区域， 设置对应的模板列： slot="isOk"(与columns中设置的template一致) -->
                <template slot-scope="scope" slot="isOk">
                    <i class="el-icon-success" style="color: blue" v-if="scope.row.cat_deleted == 0"></i>
                    <i class="el-icon-error" v-if="scope.row.cat_deleted == 1"></i>
                </template>
                <template slot-scope="scope" slot="sort">
                    <el-tag type="success" v-if="scope.row.cat_level == 0">一级</el-tag>
                    <el-tag type="warning" v-if="scope.row.cat_level == 1">二级</el-tag>
                    <el-tag type="danger" v-if="scope.row.cat_level == 2">三级</el-tag>
                </template>
                <template slot-scope="scope" slot="opt">
                    <el-button size="mini" type="primary" @click="bj(scope.row)">
                        <i class="el-icon-edit">编辑</i>
                    </el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">
                        <i class="el-icon-delete">删除</i>
                    </el-button>
                </template>
            </tree-table>
            <!-- tree 插件方法 -->
        </div>

        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="ruleForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" prop="cat_pid" v-show="title == '添加商品分类'">
                    <el-cascader style="width: 100%;" v-model='value' :options="categories" @change="handleChange"
                        :props="{ label: 'cat_name', value: 'cat_id', checkStrictly: true }"></el-cascader>
                </el-form-item>
                <el-form-item>
                    <p class="p-right">
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')"
                            v-show="title == '添加商品分类'">确定</el-button>
                        <el-button type="primary" v-show="title == '修改分类'" @click="bjxg('ruleForm')">确定</el-button>

                    </p>
                </el-form-item>
            </el-form>

        </el-dialog>

        <!-- 分页  -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>



    </div>
</template>
<script>

import { getclassify, getcategories, getshopxg, getshodels } from "../api/api";
export default {
    data() {
        return {
            //分页
            page: {
                type: [1, 2, 3],
                pagenum: 1,
                pagesize: 10,
            },
            total:10,
            //   树状表格数据 
            categories: [],
            //columns(设置表格中列配置信息)
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name'
                },
                {
                    label: '是否有效',
                    type: 'template',
                    template: 'isOk'
                },
                {
                    label: '排序',
                    type: 'template',
                    template: 'sort'
                },
                {
                    label: '操作',
                    type: 'template',
                    template: 'opt'
                },
            ],
            //模态框
            ruleForm: {
                cat_name: "",
                cat_pid: "",
                cat_level: ""

            },
            rules: {
                cat_name: { required: true, message: '分类名称不能为空', trigger: 'blur' },
            },
            title: '',
            dialogFormVisible: false,
            //级联选择器
            isjlid: [],
            value: ''
        }
    },
    methods: {
        //获取数据
        classify() {
            getclassify(this.page).then(res => {
                 console.log(res);
                this.categories = res.data.result
                this.total=res.data.total
                // console.log(this.categories);
            })
        },
        // 点击open打开模态框 
        open() {
            this.title = "添加商品分类"
            this.dialogFormVisible = true
            this.value = ''
            this.ruleForm = {}
        },
        // 点击确认添加
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('submit!');

                    if (this.isjlid.length == 0) {
                        //如果没有选择父级，父级ID设置成
                        this.ruleForm.cat_pid = 0
                        this.ruleForm.cat_level = 0
                    } else if (this.isjlid.length == 1) {
                        this.ruleForm.cat_pid = this.isjlid[0]
                        this.ruleForm.cat_level = 1
                    } else if (this.isjlid.length >= 2) {
                        this.ruleForm.cat_pid = this.isjlid[1]
                        this.ruleForm.cat_level = 2
                    }
                    getcategories(this.ruleForm).then(res => {
                        console.log(res);
                        this.classify()
                        this.dialogFormVisible = false
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //   重置按钮
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //级联选择器
        handleChange(val) {
            console.log(val);
            this.isjlid = val
        },
        //点击revise出现编辑模态框
        bj(row) {
            this.dialogFormVisible = true
            this.title = "修改分类"
            this.ruleForm = row


        },
        //点击bjxg
        bjxg() {
            getshopxg({ cat_name: this.ruleForm.cat_name, id: this.ruleForm.cat_id }).then(res => {
                console.log(res);
                this.classify()
            })
        },
        //点击删除
        del(row) {
            getshodels({ id: row.cat_id }).then(res => {
                console.log(res);
                this.classify()
            })
        },
        handleSizeChange(val){
            this.page.pagesize=val
            this.classify()
        },
        handleCurrentChange(val){
             this.page.pagenum=val
             this.classify()
        },
    },
    created() {
        this.classify()
    },
}
</script>
<style lang="scss" scoped>
.tab-box {
    margin-top: 15px;
    background-color: #fff;
    padding: 18px;
    box-sizing: border-box;
}

.addclassify {
    margin-bottom: 15px;
}

.el-select {
    width: 100%;
}

.p-right {
    text-align: right;
}
</style>